<template>
  <div class="all-state">
    <div class="all-state-title">
      <h3>下面的值是来自state的默认值</h3>
    </div>
    <div>下面的值是通过生命周期函数获取到的,可以使用created和mounted两个生命周期函数去实现</div>
    <div v-for="item in list">
      <span :key="item.id">{{item.name}}</span>
    </div>
    <div>
      <div>
        <h2>通过state给组件实现默认值的实现方式</h2>
      </div>
      <div>
        <ol>
          <ul>1.使用npm安装vuex------ npm install vuex</ul>
          <ul>2.在src目录下新建store文件夹,并且在该文件夹下新建index.js文件</ul>
          <ul>
            3.在main.js文件中引入store
            <li class="store-import">import store from './store'</li>
            <li class="store-import">
              new Vue({
              el: '#app',
              router,
              axios,
              store,
              render: h => h(App)
              });
            </li>
          </ul>
          <ul>
            4.在store文件夹下的index.js文件中引入vuex并且新建一个全局的state,然后暴露出去
            <li class="store-import">
              import Vue from 'vue'
              <br />import Vuex from 'vuex'
              <br />Vue.use(Vuex)
              <br />
              const state = {list: [{id: 1, name: 'zs'},{id: 2, name: 'ls'},{id: 3, name: 'ww'},{id: 4, name: 'xl'},{id: 5, name: 'xm'}]}
              <br />
              const store = new Vuex.Store({
                <br />
              state,
              <br />
              });
              <br />
              export default store;
            </li>
          </ul>
          <ul>
            5.在组件的created()或者mounted()生命周期函数中获取到该默认值,并且将值传给该组件的一个变量
            <li class="store-import">
               在created生命周期函数中使用:created() {this.list = this.$store.state.list;}
            </li>
            <li class="store-import">
               在created生命周期函数中使用:mounted() {this.list = this.$store.state.list;}
            </li>
          </ul>
          <ul>
            6.在组件中使用v-for渲染,这里一定要给循环的标签加上:key
            <li class="store-import" v-pre>
                 &lt;div v-for="item in list"&gt;<br/>&lt;span :key="item.id"&gt;{{item.name}}&lt;/span&gt;<br/>&lt;/div&gt;
            </li>
          </ul>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "UseState",
  data() {
    return {
      list: [],
    }
  },
  mounted() {},
  created() {
    this.list = this.$store.state.list;
  }
};
</script>

<style scoped>
.all-state {
  margin-left: 58px;
}
.store-import {
  margin-left: 50px;
  list-style: none;
}
</style>